import Callout from 'components/Callout';

# TypeScript integration

`next-intl` integrates with TypeScript out-of-the box without additional setup. You can however provide the shape of your messages to get autocompletion and type safety for your namespaces and message keys.

```json filename="messages.json"
{
  "About": {
    "title": "Hello"
  }
}
```

```tsx filename="About.tsx"
function About() {
  // ✅ Valid namespace
  const t = useTranslations('About');

  // ✖️ Unknown message key
  t('description');

  // ✅ Valid message key
  return <p>{t('title')}</p>;
}
```

To enable this validation, add a global type definition file in your project root (e.g. `global.d.ts`):

```jsx filename="global.d.ts"
// Use type safe message keys with `next-intl`
type Messages = typeof import('./messages/en.json');
declare interface IntlMessages extends Messages {}
```

You can freely define the interface, but if you have your messages available locally, it can be helpful to automatically create the interface based on a messages sample by importing it.

**If you're encountering problems, please double check that:**

1. Your interface is called `IntlMessages`.
2. You're using TypeScript version 4 or later.
3. The path of your `import` is correct.
4. Your type declaration file is included in `tsconfig.json`.
5. Your editor has loaded the most recent type declarations. When in doubt, you can restart.
